<!-- 技能特长简历2 -->
<template>
  <div class="skill-specialties" v-if="modelData.show">
    <!-- 标题 -->
    <div class="skill-title">
      <SvgIcon
        name="icon-zhuanyezhishijineng"
        width="15px"
        hight="15px"
        class="icon"
      ></SvgIcon>

      <h1>{{ modelData.title }}</h1>
    </div>
    <!-- 技能特长 -->
    <ul>
      <template v-for="(item, index) in modelData.LIST" :key="index">
        <li>
          <p>{{ item.skillName }}</p>
          <el-slider
            :model-value="vModelPro(item.proficiency)"
            :step="4"
            size="small"
            :format-tooltip="formatTooltip"
            disabled
          />
        </li>
      </template>
    </ul>
  </div>
</template>

<script setup lang="ts">
import type { ISKILLSPECIALTIES } from '@/interface/model'
import type { IMODELSTYLE } from '@/interface/modelStyle'
import { numberToText, textToNumber } from '@/util/common'
import SvgIcon from '@/components/SvgIcon/index.vue'
defineProps<{
  modelData: ISKILLSPECIALTIES
  modelStyle: IMODELSTYLE // 模块样式
}>()
const vModelPro = (text: string) => {
  return textToNumber(text)
}
// 提示文字
const formatTooltip = (number: number): string => {
  return numberToText(number)
}
// function texttonum(text) {
// let number =ref(null)
// switch (text) {
//     case '了解':
//         number.value = 25;
//         break;
//     case '熟悉':
//         number.value = 50;
//          break;
//     case '非常熟悉':
//         number.value = 75;
//          break;
//     case '精通':
//         number.value = 100;
//          break;
// }
</script>
<style lang="scss" scoped>
.skill-specialties {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  padding-top: v-bind('modelStyle.pTop');
  padding-bottom: v-bind('modelStyle.pBottom');
  padding-left: v-bind('modelStyle.pLeftRight');
  padding-right: v-bind('modelStyle.pLeftRight');
  box-sizing: border-box;
  margin-top: v-bind('modelStyle.mTop');
  margin-bottom: v-bind('modelStyle.mBottom');

  .skill-title {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 18px;

    h1 {
      font-size: 20px;
      color: #fff;
      margin: 0 0 0 10px;
    }
  }

  ul {
    display: flex;
    width: 100%;
    flex-direction: column;

    li {
      height: 44px;
      margin-bottom: 20px;
      list-style: none;

      p {
        padding: 0 0 6px 4px;
        color: v-bind('modelStyle.textColor');
        font-size: v-bind('modelStyle.textFontSize');
        font-weight: v-bind('modelStyle.textFontWeight');
      }

      :deep(.el-slider) {
        .el-slider__bar {
          background-color: #4487c6;
          border-radius: 0;
        }

        .el-slider__button {
          width: 10px;
          height: 10px;
          background-color: #4487c6;
          border: none;
        }

        .el-slider__runway {
          border-radius: 0;
        }
      }
    }
  }
}
</style>
